<template>
  <div>
    <div class="cfd-content text-left">
      <Table :columns="tableColums" :data="tableData" :loading="loading" :disabled-hover="true"></Table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Fund",
  data() {
    return {
      tableData: [],
      loading: false,
      demoloading: false,
      demotableData: []
    }
  },
  created() {
    this.init()
  },
  computed: {
    tableColums() {
      let self = this;
      let columns = [];
      columns.push({
        title: this.$t("uc.cfd.account"),
        key: "account",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.name
                }
              },
              (params.row.name || "-")
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.id"),
        key: "id",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.allocation
                }
              },
              params.row.allocation || "0"
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.type"),
        key: "type",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.type
                }
              },
              params.row.type
          );
        }
      });
      // columns.push({
      //   title: this.$t("uc.cfd.status"),
      //   key: "status",
      //   align: "center",
      //   render(h, params) {
      //     return h(
      //         "span",
      //         {
      //           attrs: {
      //             title: params.row.status
      //           }
      //         },
      //         params.row.status
      //     );
      //   }
      // });
      columns.push({
        title: this.$t("uc.cfd.balance"),
        key: "balance",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.m
                }
              },
              self.toFloor(params.row.m || "0")
          );
        }
      });
      return columns;
    },
    demotableColums() {
      let self = this;
      let columns = [];
      columns.push({
        title: this.$t("uc.cfd.account"),
        key: "account",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.account
                }
              },
              (params.row.account || "-")
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.id"),
        key: "id",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.id
                }
              },
              params.row.id || "0"
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.type"),
        key: "type",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.type
                }
              },
              params.row.type
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.status"),
        key: "status",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.status
                }
              },
              params.row.status
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.balance"),
        key: "balance",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.balance
                }
              },
              self.toFloor(params.row.balance || "0")
          );
        }
      });
      return columns;
    }
  },
  methods: {
    init() {
      this.$http.get("/api/getAllocation?token="+sessionStorage.getItem("token")).then(res => {
        console.log(res.body)
        const json = res.body.data
        json.type = "MYR"
        this.tableData.push(json)
      })
    },
    add() {
      this.form={
        name: "",
        type: "USD",
        ggbl: 100,
        pwd: '123456',
        zjed: 100000
      }
      this.modal = true
    },
    ok(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    cancel() {
      this.modal = false
    }
  }
}
</script>

<style scoped>
.text-left {
  text-align: left;
}
.mt20 {
  margin-top: 20px;
}
.moni {
  display: flex;
  justify-content: space-between;
}
</style>